<script setup lang="ts">
import ChatList from '@/components/Chat/ChatList/ChatList.vue'
import { computed, ref } from 'vue'
import { useGlobalStorage } from '@/stores/global.ts'
// 可选，用于响应式获取窗口尺寸
import { useWindowSize } from '@vueuse/core'

// 是否选中会话
const selected = ref(false)

const globalStorage = useGlobalStorage()
// 响应式窗口尺寸
const { width } = useWindowSize()
const returnVisibleMessage = computed(() => {
  if (width.value <= 640) {
    return globalStorage.visibleMessage
  } else {
    return true
  }
})
</script>

<template>
  <div class="chat-box" v-show="returnVisibleMessage">
    <div class="chat-wrapper">
      <div v-if="selected">
        <!--未选中会话，默认加载图标-->
        <ElIcon :size="160" color="var(--font-light)">
          <IEpChatDotRound />
        </ElIcon>
      </div>
      <div v-else class="chat-list">
        <!--消息聊天列表-->
        <ChatList />
        <!--消息聊天发送区-->
        <SendBar />
      </div>
    </div>
    <!--用户列表-->
    <GroupUserList />
  </div>
</template>

<style scoped lang="scss">
.chat-box {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 20px 20px 20px 0;
  overflow: hidden;

  .chat-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    //聊天列表
    .chat-list {
      width: 100%;
      overflow-y: scroll;
      position: relative;
      background-color: var(--background-secondary);

    }
  }
}

@media only screen and (max-width: 640px) {
  .chat-box {
    //display: none;
    padding: 0;
  }
}
</style>
